import { StyleSheet, Text, View, Image, ImageBackground, FlatList, TouchableOpacity, TextInput } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons, MaterialCommunityIcons, AntDesign, FontAwesome } from '@expo/vector-icons';
import Home from './pages/Home';
import Shopping from './pages/Shopping';
import Inspiration from './pages/Inspiration ';
import User from './pages/User';
import Bed from './pages/Home/Home_Bed';
import Furnishing from './pages/Home/Home_Furnishing';
import Kitchen from './pages/Home/Home_Kitchen';
import Recommend from './pages/Home/Home_Recommend';
import './global';
//search：<Ionicons name="md-search" size={24} color="black" />
//星星：<Ionicons name="star-half" size={24} color="black" />
//home:<MaterialCommunityIcons name="home" size={24} color="black" />
//shopping-bag:<FontAwesome name="shopping-bag" size={24} color="black" />
//<Ionicons name="planet-outline" size={24} color="black" />
//user:<AntDesign name="user" size={24} color="black" />

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const TabBar = () => (
  <Tab.Navigator
    screenOptions={{
      tabBarActiveTintColor: '#ffdb2c',
      headerShown: true,
      headerTitleAlign: 'center',
      headerStyle: {
        backgroundColor: '#ffdb2c',
      }
    }}>
    <Tab.Screen
      options={{
        title: '首页',
        tabBarIcon: ({ color, size }) => (
          <MaterialCommunityIcons name="home" color={color} size={size} />
        ),
        headerRight: () => {
          return <Ionicons name="md-search" size={26} color="black" style={{marginRight:width(30)}}/>
        },
        headerTitle: () => {
          return <Image source={require('./images/logo.png')} style={{ width: width(70), height: height(41)}} />
        }
      }}
      name='Home'
      component={Home}
    />
    <Tab.Screen
      options={{
        title: '商城',
        tabBarIcon: ({ color, size }) => (
          <FontAwesome name="shopping-bag" color={color} size={size} />
        )
      }}
      name='Shopping'
      component={Shopping}
    />
    <Tab.Screen
      options={{
        title: '灵感',
        tabBarIcon: ({ color, size }) => (
          <Ionicons name="planet-outline" color={color} size={size} />
        )
      }}
      name='Inspiration'
      component={Inspiration}
    />
    <Tab.Screen
      options={{
        title: '我的',
        tabBarIcon: ({ color, size }) => (
          <AntDesign name="user" color={color} size={size} />
        )
      }}
      name='User'
      component={User}
    />
  </Tab.Navigator>
)
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name='Root' component={TabBar} />
      </Stack.Navigator>
    </NavigationContainer >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%'
  },
});
